import React, { Fragment, useState } from "react";
import "./index.css";

export default function Index(props) {
  const onSuccess=props.onSuccess;
  //state 部分
  const [showUploadDialog, setShowUploadDialog] = useState(() => {
    return false;
  });
  const [uploadList, setUploadList] = useState(() => {
    return [
      // {
      //   fileName: "测试上传文件",
      //   fileCreatedTime:'测试创建时间',
      //   fileSize: "文件大小",
      //   file: "",
      // },
    ];
  });
  //Dragfiles
  const Dragfiles = (function () {
    let instance;
    return function () {
      if (!instance) {
        instance = new FormData();
      }
      return instance;
    };
  })();
  //为Dragfiles添加一个清空所有文件的方法
  FormData.prototype.deleteAll = function () {
    var _this = this;
    this.forEach(function (value, key) {
      _this.delete(key);
    });
  };
  //function部分
  function showDialog() {
    //打开上传框
    setShowUploadDialog(true);
  }
  function closeDialog() {
    //关闭上传框
    setShowUploadDialog(false);
  }
  function deleteFile(fileName, event) {
    console.log(fileName);
    setUploadList((value) => {
      return value.filter((v) => {
        return !(v.fileName === fileName);
      });
    });
  }
  function upload() {
    onSuccess(uploadList);
    closeDialog();
    clearAll();
  }


  //清空所有内容
  function clearAll() {
    setUploadList([]);
  }
  //处理拖放结束的事件
  function handleDragOver(event) {
    event.preventDefault();
  }
  function handleDragLeave(event) {
    event.preventDefault();
  }
  function handleDrop(event) {
    event.preventDefault();
    const files = event.dataTransfer.files;
    console.log(files);
    const len = files.length;
    let i = 0;
    let name, time, size;
    const newForm = Dragfiles(); 
    const it = newForm.entries(); 
    let tmpUploadList = [];
    console.log(files);
    while (i < len) {
      name = files[i].name;
      size = Math.round((files[i].size * 100) / 1024) / 100 + "KB";
      time =
        files[i].lastModifiedDate.toLocaleDateString() +
        " " +
        files[i].lastModifiedDate.toTimeString().split(" ")[0];

      tmpUploadList.push({
        fileName: name,
        fileCreatedTime: time,
        fileSize: size,
        file: files[i],
      });
      newForm.append(files[i].name, files[i]);

      console.log(it.next());
      i++;
    }

    console.log(tmpUploadList, uploadList);
    //更新UI
    setUploadList((value) => {
      value.push(...tmpUploadList);
      return [...value];
    });
  }

  return (
    <Fragment>
      <span
        className="addNewBook"
        onClick={() => {
          showDialog();
        }}
      >
        <img src="addNew.png" width="150px" alt="添加新的一本书"></img>
      </span>
      <div
        className={`${showUploadDialog ? "show" : "hide"} overlay`}
        onClick={() => {
          closeDialog();
        }}
      ></div>
      <div
        id="modal"
        className={`${showUploadDialog ? "show" : "hide"} dropbox`}
      >
        <div className="items-container">
          <div
            id="close"
            onClick={() => {
              closeDialog();
            }}
          >
            <span className="css-close"></span>
          </div>
          <div>
            <p className="head">
              <b>拖拽文件至此</b>
            </p>
            <div
              className="content"
              id="content"
              onDragOver={(e) => {
                handleDragOver(e);
              }}
              onDragLeave={(e) => {
                handleDragLeave(e);
              }}
              onDrop={(e) => {
                handleDrop(e);
              }}
            >
              <table className="table">
                <tbody className="tbody">
                  {/* 添加具体的文件信息 */}
                  {uploadList.map((value) => {
                    return (
                      <tr key={value.fileName}>
                        <td>{value.fileName}</td>
                        <td>{value.fileCreatedTime}</td>
                        <td>{value.fileSize}</td>
                        <td
                          onClick={(e) => {
                            deleteFile(value.fileName, e);
                          }}
                        >
                          删除
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
            <div className="footer">
              <button className="btn" onClick={() => upload()}>
                开始上传
              </button>
              <button className="btn" onClick={() => clearAll()}>
                清空所有
              </button>
            </div>
          </div>
        </div>
      </div>
    </Fragment>
  );
}
